<template>
    <div id="pagebox" class="task_detail_wrapper">
        <div class="batchInfo" v-if="infoList">
            <div class="batchName">
                {{infoList.markTaskName}}
                <span class="nextstep">{{infoList.nextStep|nextStep}}</span>
            </div>
            <div class="info-one info" v-if="infoList">
                <ul>
                    <li>
                        文件数量&nbsp;:
                        <span>&nbsp;{{infoList.fileCount}}</span>
                    </li>
                    <li>
                        标注人员&nbsp;:
                        <span :title="infoList.users[0]!=null ? infoList.users[0].realname!=null?infoList.users[0].realname:infoList.users[0].account : '--'">&nbsp;{{infoList.users[0]!=null ? infoList.users[0].realname!=null?infoList.users[0].realname:infoList.users[0].account : '--'}}</span>
                    </li>
                    <li>
                        检查人员&nbsp;:
                        <span :title="infoList.users[1]!=null ? infoList.users[1].realname!=null?infoList.users[1].realname:infoList.users[1].account : '--'">&nbsp;{{infoList.users[1]!=null ? infoList.users[1].realname!=null?infoList.users[1].realname:infoList.users[1].account : '--'}}</span>
                    </li>
                    <li>
                        质检人员&nbsp;:
                        <span :title="infoList.users[2]!=null ? infoList.users[2].realname!=null?infoList.users[2].realname:infoList.users[2].account : '--'">&nbsp;{{infoList.users[2]!=null ? infoList.users[2].realname!=null?infoList.users[2].realname:infoList.users[2].account : '--'}}</span>
                    </li>
                </ul>
            </div>
            <div class="info-two info">
                <ul>
                    <li>
                        好数据量&nbsp;:
                        <span>&nbsp;{{infoList.goodDataCount}}</span>
                    </li>
                    <li>
                        开始时间&nbsp;:
                        <span>&nbsp;{{infoList.startTimes[0]|formatDate}}</span>
                    </li>
                    <li>
                        检查时间&nbsp;:
                        <span>&nbsp;{{infoList.startTimes[1]|formatDate}}</span>
                    </li>
                    <li>
                        质检时间&nbsp;:
                        <span>&nbsp;{{infoList.startTimes[2]|formatDate}}</span>
                    </li>
                </ul>
            </div>
            <div class="info-three info">
                <ul>
                    <li>
                        坏数据量&nbsp;:
                        <span>&nbsp;{{infoList.badDataCount}}</span>
                    </li>
                    <li>
                        完成时间&nbsp;:
                        <span>&nbsp;{{infoList.endTime|formatDate}}</span>
                    </li>
                    <li>
                        检查评语&nbsp;:
                        <span :title="infoList.evaluations[1]">&nbsp;{{infoList.evaluations[1]?infoList.evaluations[1]:"--"}}</span>
                    </li>
                    <li>
                        质检评价&nbsp;:
                        <span :title="infoList.evaluations[2]">&nbsp;{{infoList.evaluations[2]?infoList.evaluations[2]:"--"}}</span>
                    </li>
                </ul>
            </div>
            <div class="info-four info">
                <ul>
                    <li>
                        正确率&nbsp;:
                        <span>&nbsp;{{infoList.accuracyRate}}%</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="noneresult" v-if="contentNull">暂无数据</div>
        <div class="table con-list progressList" v-else>
            <table width="100%">
                <thead>
                    <tr>
                        <td width="5%">序号</td>
                        <td>标注结果</td>
                        <td>检查结果</td>
                        <td>质检结果</td>
                        <td width="10%">
                            正确率
                            <b class="sort">
                                <span class="top" @click="rank(0)"></span>
                                <i class="bottom" @click="rank(1)"></i>
                            </b>
                        </td>
                        <td width="10%">操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(list,index) in filesList" :key="list+index">
                        <td>{{index}}</td>
                        <td>--</td>
                        <td>--</td>
                        <td>--</td>
                        <td :style="{ 'color' : list.rate!==1 || !list.rate ? 'red':'black'}" style>{{list.rate}}%</td>
                        <td>
                            <a class="rem-btn" v-on:click="seeresult(list, index)" :style="notClick(list)">查看结果</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- <div class="pagesize" id="pagesize"></div> -->
        <el-pagination v-show="filesList && filesList.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size.sync="pagination.pageSize" :current-page.sync="pagination.currPage" layout="sizes, prev, pager, next" :total.sync="pagination.total">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: "MarktaskDetail",
    data() {
        return {
            batchId: "",
            taskId: "",
            markTaskId: "",
            filesList: null,
            infoList: null,
            item: null,
            list: null,
            total: 0,
            pagination: {
                // 分页配置
                currPage: 1,
                pageSize: 10,
                total: 0,
                handleSizeChange: this.handleSizeChange,
                handleCurrentChange: this.handleCurrentChange
            },
            contentNull: false,
            audioSrc: "",
            playIndex: "-",
            playType: "pause",
            postData: {
                currPage: 1,
                pageSize: 10
            },
            finalData: [], // 处理后的最后结果
            markStatus: true, // 是否存在标注环节
            checkStatus: false, // 是否存在检查环节
            testStatus: false // 是否存在质检环节
            // processed: false, // 是否已经处理过
        };
    },
    created() {
        this.taskId = this.Utils.getQueryStringArgs().taskId;
        this.markTaskId = this.Utils.getQueryStringArgs().markTaskId;
        this.batchId = this.Utils.getQueryStringArgs().batchId;
    },
    mounted: function() {
        var self = this;
        self.ass_api
            .taskDetailInfo({
                selectType: "batch_progress_manager",
                markTaskId: this.markTaskId,
                taskId: this.taskId
            })
            .then(data => {
                if (!data) return;
                this.$set(self, "infoList", data);
            });
        this.search();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`${val}页面展示多少条`);
            this.search();
        },
        handleCurrentChange(val) {
            console.log(`${val}当前多少页`);
            this.search();
        },
        rank(type) {
            if (type == 0) {
                this.filesList.sort(function(a, b) {
                    return b.rate * 1 - a.rate * 1;
                });
            } else {
                this.filesList.sort(function(a, b) {
                    return a.rate * 1 - b.rate * 1;
                });
            }
        },
        notClick: function(item) {
            if (!item.fileId) {
                // 如果fileId不存在
                return {
                    color: "#CACAC9",
                    border: "1px solid #cacaca",
                    "pointer-events": "none"
                };
            }
        },
        search: function() {
            //查询
            let self = this;
            self.postData["taskId"] = this.taskId;
            self.postData["markTaskId"] = this.markTaskId;
            self.postData["batchId"] = this.batchId;
            self.postData.currPage = self.pagination.currPage;
            self.postData.pageSize = self.pagination.pageSize;

            self.ass_api.taskDetailFileList(self.postData).then(data => {
                if (!data) return;
                if (
                    data.list == undefined ||
                    data.list == null ||
                    data.list == ""
                ) {
                    self.filesList = null;
                    self.contentNull = true;
                } else {
                    self.filesList = data.list;
                    self.contentNull = false;
                }
                self.pagination.pageSize =
                    data.pageSize == 0 ? 10 : data.pageSize;
                self.pagination.total = data.count;
            });
        },
        // 对比
        comparison: function() {
            var data = this.finalData || [];
            for (var i = 0, len = data.length; i < len; i++) {
                var dataInfo = data[i].info || [];
                if (dataInfo[0] && dataInfo[1]) {
                    // 检查
                    this.changeComparison(dataInfo[0], dataInfo[1], 1);
                } else if (dataInfo[0] && dataInfo[2]) {
                    // 质检
                    this.changeComparison(dataInfo[0], dataInfo[2], 2);
                }
            }
        },
        /**
         * 对比数据，然后变色
         * @param data1 数据一
         * @param data2 数据一
         * @param type 类型 1 和检查 2 和质检
         */
        changeComparison: function(data1, data2) {
            var contentDomL = "", // 对比结果1
                contentDomR = ""; // 对比结果2
            for (var i = 0, len = data1.rtxt.length; i < len; i++) {
                var lData = data1.rtxt[i] || "";
                var rData = data2.rtxt[i] || "";
                contentDomL = $("<span></span>").append(lData)[0];
                contentDomR = $("<span></span>").append(rData)[0];
                this.MyCompare(contentDomL, contentDomR);
                data1.rtxt[i] = contentDomL.outerHTML;
                data2.rtxt[i] = contentDomR.outerHTML;
            }
        },
        // 工具函数,判断是否是数组
        isArray: function(data) {
            return Array.isArray(data);
        },
        // 前置函数
        preDataHandling: function(data) {
            if (!this.isArray(data)) {
                // 不是数组
                return false;
            }

            this.finalData = []; // 初始化
            for (var i = 0, len = data.length; i < len; i++) {
                this.dataHandling(
                    data[i].extend,
                    data[i].result || [],
                    data[i].name,
                    data[i].accuracyRate,
                    data[i].isFree
                );
                // if(data[i].result)  { // 只要有一个存在就是
                //     this.contentNull = false;
                // }
                if (i === 0) {
                    // 不论多少个文件,其内容应该一致
                    this.changeStatus(data[i]);
                }
            }

            this.comparison();
        },
        // 处理文件的环节参数
        changeStatus: function(data) {
            var that = this;
            try {
                that.markStatus = data.markStatus || false;
                that.checkStatus = data.checkStatus || false;
                that.testStatus = data.testStatus || false;
            } catch (e) {
                console.warn("参数错误");
            }
        },
        /**
         * 数据处理
         * @param data 一条数据，也就是一个任务下面一条小任务的数据
         * @param name 任务名
         * @param rate 正确率
         * @returns {boolean}
         */
        dataHandling: function(extend, data, name, rate) {
            if (!this.isArray(data)) {
                // 不是数组
                return false;
            }

            var newData = {}; // 定义一个新数组，存数据
            newData.name = name;
            newData.rate = rate;
            newData.markName = ""; // 标注员信息
            newData.checkName = ""; // 检查员信息
            newData.testName = ""; // 检查员信息
            newData.markReplaceAate = ""; // 标注低置信替换率
            newData.checkReplaceAate = ""; // 标注低置信替换率
            newData.info = [];
            newData.fileId = "";
            ////// 兼容处理 针对免检 (暂不做任何处理)

            for (var i = 0, len = data.length; i < len; i++) {
                var finalResult = data[i].finalResult
                    ? data[i].finalResult
                    : {};
                var resultText = finalResult.resultText
                    ? JSON.parse(finalResult.resultText)
                    : {};
                var fileId = data[i].fileInfo ? data[i].fileInfo.fileId : "";
                var userText = resultText.resultText;
                var lArr = []; // 临时数组
                for (var j = 0, len2 = 1; j < len2; j++) {
                    // 处理vads
                    lArr.push(userText);
                }
                if (!newData.info[data[i].step]) {
                    newData.info[data[i].step] = {
                        step: data[i].step,
                        rtxt: lArr
                    };
                }
                if (!newData.fileId) {
                    // 赋值 fileId
                    newData.fileId = fileId;
                }
            }

            /*针对extend 字段*/
            for (var k in extend) {
                if (k === "marker") {
                    // 标注信息
                    newData.markName = extend[k].name || "";
                } else if (k === "checker") {
                    newData.checkName = extend[k].name || "";
                } else if (k === "auther") {
                    newData.testName = extend[k].name || "";
                } else if (k === "step_0") {
                    newData.markReplaceAate = extend[k].confidence;
                } else if (k === "step_1") {
                    newData.checkReplaceAate = extend[k].confidence;
                }
            }

            this.finalData.push(newData);
        },
        // 工具函数 (是否符合)
        isNot: function(data) {
            if (!data) {
                console.warn("数据不正常");
                return false;
            }
            return true;
        },
        seeresult: function(item, index) {
            //查看文件
            var pageCur = this.pagination.currPage, // 默认第一页
                pageSize = this.pagination.pageSize,
                fileInd = 0;
            fileInd = (pageCur - 1) * pageSize + index;

            var url =
                "/assets/home/result-page/?markTaskId=" +
                this.markTaskId +
                "&taskId=" +
                this.taskId +
                "&fileid=" +
                item.fileId +
                "&fileInd=" +
                fileInd +
                "&batchId=" +
                this.batchId;
            window.open(url);
        }
    },
    filters: {
        setShowInfo: function(value) {
            if (value !== 0 && !value) {
                return "--";
            }
            return value;
        },
        getAccuracyRate: function(value) {
            if (value !== 0 && !value) {
                return "--";
            } else {
                return (parseFloat(value) * 100).toFixed(2) + "%";
            }
        },
        getName: function(value) {
            //获取字符串真实长度
            var length = value.replace("/[\u0391-\uFFE5]/g", "aa").length;
            if (value && (length < 20 || length == 20)) {
                return value;
            } else if (value && length > 20) {
                for (var i = 10; i < value.length; i++) {
                    if (
                        value.substr(0, i).replace("/[^\x00-\xff]/g", "mm")
                            .length >= 20
                    ) {
                        return value.substr(0, i) + "...";
                    }
                }
                return value;
            } else {
                return "--";
            }
        },
        nextStep: function(value) {
            if (value == 0) {
                return "标注任务";
            } else if (value == 1) {
                return "检查任务";
            } else if (value == 2) {
                return "质检任务";
            } else if (value == 3) {
                return "角色合并";
            }
        },
        formatDate: function(value) {
            //过滤时间  page\static\js\member\my_task.js front\src\main\resources\templates\member\my_task.html
            if (value != null) {
                function addZero(val) {
                    if (val < 10) {
                        return "0" + val;
                    } else {
                        return val;
                    }
                }
                var dataTime = "";
                var data = new Date();
                data.setTime(value);
                var year = data.getFullYear();
                var month = addZero(data.getMonth() + 1);
                var day = addZero(data.getDate());
                // var hour = addZero(data.getHours());
                // var minute = addZero(data.getMinutes());
                // var second = addZero(data.getSeconds());
                dataTime = year + "-" + month + "-" + day;
                return dataTime; //将格式化后的字符串输出到前端显示
            } else {
                return "--";
            }
        }
    }
};
</script>
<style lang="less" scoped>
.task_detail_wrapper {
    background: #fff;
    height: 100%;
    text-align: left;
}
.batchInfo {
    padding: 10px 20px 0 20px;
    background: #fff;
    min-height: 230px;
    .info {
        float: left;
        width: 220px;
    }
    .info ul li {
        font-size: 14px;
        color: #999999;
        line-height: 30px;
    }
    .info ul li span {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        display: inline-block;
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        top: 5px;
    }
    .info-one {
        float: left;
        width: 220px;
        margin-top: 30px;
    }
    .info-two {
        float: left;
        width: 220px;
        margin-top: 30px;
    }
    .info-three {
        float: left;
        width: 220px;
        margin-top: 30px;
    }
    .info-four {
        float: left;
        width: 220px;
        margin-top: 30px;
    }
    .batchName {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
    }
}
.nextstep {
    display: inline-block;
    padding: 0 20px;
    background: #f3f3f3;
    color: #999;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    margin-left: 20px;
    position: relative;
    top: -2px;
}
.con-list {
    margin-bottom: 35px;
    border: 1px solid #eeeeee;
    table thead {
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #eeeeee;
        background: #fafafa;
        color: #969696;
    }
    table tbody {
        height: 45px;
        line-height: 45px;
        background: #fff;
    }
    table tr:nth-child(even) {
        border-top: 1px dashed #eeeeee;
    }
    table tr:not(:last-child) {
        border-bottom: 1px dashed #ececec;
    }
    table tr td:not(:first-child) {
        max-width: 150px;
    }
    table tr td {
        text-align: center;
        font-size: 14px;
        height: 45px;
        word-break: break-word;
        padding: 0 5px;
        line-height: initial;
    }
    table tr td:not(:first-child) div {
        white-space: nowrap;
        margin-right: 0;
        overflow: hidden;
        padding: 0;
        text-overflow: ellipsis;
    }
    td {
        height: 45px;
        line-height: 45px;
        text-align: center;
    }
    tr td {
        border: 0;
        padding: 0;
    }
}
.lot_det .progressList tr td {
    border: 1px solid #ececec;
}
.con-list table tr td .rem-btn {
    color: rgb(51, 204, 0);
    cursor: pointer;
}
</style>